<template>
	<form>
		<slot></slot>
	</form>
</template>
<script>
	export default {
		name: 'AForm',
		options: {
			// 微信小程序中 options 选项
			multipleSlots: true, //  在组件定义时的选项中启动多slot支持，默认启用
			styleIsolation: "isolated", //  启动样式隔离。当使用页面自定义组件，希望父组件影响子组件样式时可能需要配置。具体配置选项参见：微信小程序自定义组件的样式
			addGlobalClass: true, //  表示页面样式将影响到自定义组件，但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared
			virtualHost: true, //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
		},
		props: {
			form: Object,
			rules: String,//因为小程序对于对象中函数的限制和其他限制，隐藏这里传rules在父组件中的字段值
			disabled: Boolean
		},
		computed:{
			rulesData(){
				let currentPage = getCurrentPages().slice(-1)[0].$vm;
				return this.rules&&currentPage[this.rules]||null
			}
		},
		methods: {
			//查找所有下属 的 AFormItem组件, 并在回调函数中进行处理
			findFormItems(callback) {
				const findFn = (children) => {
					children.forEach(e => {
						if (e.$options.name == 'AFormItem') callback(e);
						else if (e.$children.length) findFn(e.$children)
					})
				}
				findFn(this.$children)
			},
			//对整个表单的内容进行验证。 接收一个回调函数
			validate(cb) {
				let result = true;
				this.findFormItems((e)=>{
					if(e.prop){
						let res = e.validator()
						if(result&&!res) result = false;
					}
					
				});
				cb(result)
			},
			validateField(prop){
				
			},
			//重置该表单项，将其值重置为初始值，并移除校验结果
			resetFields() {

			},
			//清空校验结果
			clearValidate(){
				this.findFormItems(e=>{
					e.clearValidate()
				})
			},
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>

</style>